<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     body{
        padding: 0px;
        margin: 0px;
    }   
    #draw{
        height:600px;
        width:600px;
        margin: auto;
        margin-top: 10px;
    }
    #save{
        margin-top: 5px;
    }
    canvas{
        cursor: url("pen.ico"),auto;
    }
  </style>
</head>
  <body style="background-color:#ccc">
    <div id="draw">
      <canvas id="mycanvas" height="500" width="600" style="background-color: #fff"></canvas><br>
      <button id="reset" class="button button-action button-rounded">清空画板</button>
      <button id="color_0" class="button button-caution button-box button-small"
        style="background-color: black">黑</button>
      <button id="color_1" class="button button-primary button-box button-small"
        style="background-color: rgb(39, 146, 233)">蓝</button>
      <button id="color_2" class="button button-action button-box button-small"
        style="background-color: rgb(141, 207, 115)">绿</button>
      <button id="color_3" class="button button-caution button-box button-small"
        style="background-color: rgb(194, 41, 41)">红</button>
      <span class="button-dropdown" data-buttons="dropdown">
  
        <div class="button-dropdown-list">
          <input type="radio" name="colors" id="wth_1">细
          <input type="radio" name="colors" id="wth_2">中
          <input type="radio" name="colors" id="wth_3">粗
        </div>
      </span>
      <button id="eraser" class="button button-rounded">橡皮擦</button>
      <button id="save" class="button button-block button-rounded button-highlight button-large">保存</button>
    </div>
    <script>
          window.onload = function () {
              var cvs = document.getElementById("mycanvas");
              var plt = document.getElementById("mycanvas").getContext("2d");
              var btn_1 = document.getElementById("reset");
              var black = document.getElementById("color_0");
              var blue = document.getElementById("color_1");
              var green = document.getElementById("color_2");
              var red = document.getElementById("color_3");
              var wth_1 = document.getElementById("wth_1");
              var wth_2 = document.getElementById("wth_2");
              var wth_3 = document.getElementById("wth_3");
              var eraser = document.getElementById("eraser");
              var save = document.getElementById("save");
              var is_eraser = false;

              //PC
              cvs.onmouseover = function (ev) {
                ev.preventDefault();
              }
              cvs.onmousedown = function (ev) {
                var pageX = ev.pageX || ev.changedTouches[0].pageX;
                var pageY = ev.pageY || ev.changedTouches[0].pageY;

                //每次都从一个新起点开始，会默认结束上一个。写restore的话会闭合图像
                plt.beginPath();
                plt.moveTo(pageX - cvs.offsetLeft, pageY - cvs.offsetTop);

                cvs.onmousemove = function (ev) {
                  var pageX = ev.pageX || ev.changedTouches[0].pageX;
                  var pageY = ev.pageY || ev.changedTouches[0].pageY;
                  plt.lineTo(pageX - cvs.offsetLeft, pageY - cvs.offsetTop);
                  plt.stroke();
                }
              }
              cvs.onmouseup = function () {
                cvs.onmousemove = null;
              }
              document.ontransitionend = function () {
                cvs.onmousemove = null;
              }

              //Mobile Phone
              cvs.ontouchstart = cvs.onmousedown
              cvs.ontouchmove = function (ev) {
                var pageX = ev.pageX || ev.changedTouches[0].pageX;
                var pageY = ev.pageY || ev.changedTouches[0].pageY;
                plt.lineTo(pageX - cvs.offsetLeft, pageY - cvs.offsetTop);
                plt.stroke();
              }

              btn_1.onclick = function () {
                plt.clearRect(0, 0, 600, 500);
              }

              black.onclick = function () {
                if (!is_eraser) {
                  plt.strokeStyle = "rgb(0,0,0)";
                }
              }
              blue.onclick = function () {
                if (!is_eraser) {
                  plt.strokeStyle = "rgb(71,174,249)";
                }
              }
              green.onclick = function () {
                if (!is_eraser) {
                  plt.strokeStyle = "rgb(165,222,55)";
                }
              }
              red.onclick = function () {
                if (!is_eraser) {
                  plt.strokeStyle = "rgb(255,67,81)";
                }
              }

              wth_1.onclick = function () {
                if (!is_eraser) {
                  plt.lineWidth = 1;
                }
              }
              wth_2.onclick = function () {
                if (!is_eraser) {
                  plt.lineWidth = 3;
                }
              }
              wth_3.onclick = function () {
                if (!is_eraser) {
                  plt.lineWidth = 5;
                }
              }

              eraser.onclick = function () {
                if (!is_eraser) {
                  plt.save();
                  plt.strokeStyle = "rgb(255,255,255)";
                  plt.lineWidth = 12;
                  eraser.innerHTML = "画笔";
                  is_eraser = true;
                  $(cvs).css("cursor", "url('eraser.ico'),auto");
                } else {
                  plt.restore();
                  eraser.innerHTML = "橡皮擦";
                  is_eraser = false;
                  $(cvs).css("cursor", "url('pen.ico'),auto");
                }
              }

              save.onclick = function () {
                var image = cvs.toDataURL("image/png").replace("image/png", "image/octet-stream");
                window.location.href = image;
              }
            }
    </script>
</body>
</html>